import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createPage } from 'nc-lightapp-front';
import './index.less';
import ButtonAdd from "./button-add/index"
import InpurtSearch from "./input-search/index"
import DataTableList from "./data-table-list/index"

/**
 * @功能: 票袋组件
 * @作者：Mr.sha
 * @日期：2022-05-26
 */
export default class TicketBag extends Component {

    /**
     * @功能: 票袋组件的构造函数
     * @作者：Mr.sha
     * @日期：2022-05-26
     * @param {*} props 父级传递过来的参数
     */
    constructor(props) {
        super(props);
        this.state = {
            // 新建票袋按钮的显示名称
            buttonAddShowVal: "新建票袋",
            activeId: "1"
        },
        // 新增按钮触发的函数  
        this.handleAddBag =this.handleAddBag,
        // 票袋名称改变后触发的函数 
        this.handleAfterValChangeBag = this.handleAfterValChangeBag.bind(this),
        // 删除按钮触发的函数 
        this.handleDelBag = this.handleDelBag.bind(this),
        // 初始化界面函数 
        this.handleInitDataBag = this.handleInitDataBag.bind(this),
        // 刷新界面函数
        this.handleRefreshDataBag = this.handleRefreshDataBag.bind(this),
        this.handleChangeActiveDataTableList = this.handleChangeActiveDataTableList.bind(this)
    }


    // 组件将要挂载时触发的函数~~~只执行一次
    componentWillMount() {
        console.log("componentWillMount");
    }

    // 组件挂载完成时触发的函数~~~只执行一次
    componentDidMount() {
        console.log("componentDidMount"); 
    }

    /**
     * 组件将要更新数据时触发的函数
     * @param {*} newProps 新的props
     * @param {*} newState 新的State
     * @param {*} newContext 新的context
     */
    componentWillUpdate(newProps,newState,newContext) {
        
        // console.log("componentWillUpdate"); 
        // console.log(newProps);
        // console.log(newState);
        // console.log(newContext);
    }

    /**
     * 组件数据更新完成时触发的函数
     * @param {*} newProps 新的props
     * @param {*} newState 新的State
     * @param {*} Snapshot 由componentWillReceiveProps⽣命周期返回的快照
     */
    componentDidUpdate(newProps,newState,Snapshot) {
        
        // console.log("componentDidUpdate"); 
        // console.log(newProps);
        // console.log(newState);
        // console.log(Snapshot);
    }

    /**
     * @功能: 新增按钮触发的函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleAddBag(params) {
        console.log(params);
        console.log("addBag");
    }

    /**
     * @功能: 票袋名称改变后触发的函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleAfterValChangeBag(params) {
        console.log("handleValChangeBag");
    }

    /**
     * @功能: 删除按钮触发的函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleDelBag(params) {
        console.log("handleDelBag");
    }

    /**
     * @功能: 初始化界面函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleInitDataBag(params) {
        console.log("handleInitDataBag");
    }

    /**
     * @功能: 刷新界面函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleRefreshDataBag(params) {
        console.log("handleInitDataBag");
    }

    /**
     * @功能: 改变当前活跃的对象
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleChangeActiveDataTableList(params){
        let { activeId } = params;
        this.setState({activeId: activeId});
    }

    render() {
        return (
            <div className='ticket-bag' id = "ticket-bag">
                <div className='ticket-bag-main'>
                    <ButtonAdd showVal = {this.state.buttonAddShowVal} handleAddBag = {this.handleAddBag} />
                    <InpurtSearch handleRefreshDataBag = {this.handleRefreshDataBag}/>
                    <DataTableList 
                    activeIdList = {this.state.activeId}
                    handleAfterValChangeBag = {this.handleAfterValChangeBag}
                    handleDelBag = {this.handleDelBag}
                    handleChangeActiveDataTableList = {this.handleChangeActiveDataTableList}
                    />
                </div>
            </div>

        )
    }
}

TicketBag = createPage({
    mutiLangCode: '2011'
})(TicketBag);

ReactDOM.render(<TicketBag />, document.querySelector('#app'))